<template>
  <div style="margin-top: 5px;margin-left: 5px">
    <div style="margin-bottom: 10px">
      <el-button @click="downStus" type="primary">导出学生信息</el-button>
    </div>
    <div>
      <el-table
        :data="students"
        border
        style="width: 100%">
        <el-table-column
          prop="studentName"
          align="center"
          label="学生姓名"
          width="130">
        </el-table-column>
        <el-table-column
          prop="studentSchool"
          align="center"
          label="毕业中学"
          width="150">
        </el-table-column>
        <el-table-column
          prop="studentClass"
          align="center"
          label="班级名称"
          width="150">
        </el-table-column>
        <el-table-column
          prop="studentPhone"
          align="center"
          label="学生电话"
          width="160">
        </el-table-column>
        <el-table-column
          prop="studentQq"
          align="center"
          label="学生QQ"
          width="160">
        </el-table-column>
        <el-table-column
          prop="studnetMajor"
          align="center"
          label="拟报专业"
          width="150">
        </el-table-column>
        <el-table-column
          prop="recruitStuName"
          align="center"
          label="招生学生姓名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="studentRelation"
          align="center"
          label="是否联系"
          width="150">
          <template slot-scope="scope">
            {{scope.row.studentRelation?'已联系':'未联系'}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleDel(scope.row)" type="text" size="small">删除</el-button>
            <el-button type="text" size="small" @click="editStu(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px"
        @current-change="currentChange"
        :current-page="currentPage"
        background
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
      <el-dialog
        title="提示"
        @close="dialogVisibleClose"
        :visible.sync="dialogVisible"
        top="10px"
        width="30%">
        <el-form v-model="student">
          <el-form-item label="学生姓名">
            <el-input v-model="student.studentName" style="width: 150px"></el-input>
          </el-form-item>
          <el-form-item label="学生电话">
            <el-input v-model="student.studentPhone" style="width: 150px"></el-input>
          </el-form-item>
          <el-form-item label="学生QQ">
            <el-input v-model="student.studentQq" style="width: 150px"></el-input>
          </el-form-item>
          <el-form-item label="毕业中学">
            <el-input v-model="student.studentSchool" style="width: 150px"></el-input>
          </el-form-item>
          <el-form-item label="班级名称">
            <el-input v-model="student.studentClass" style="width: 150px"></el-input>
          </el-form-item>
          <el-form-item label="拟报专业">
            <el-input v-model="student.studnetMajor" style="width: 150px"></el-input>
          </el-form-item>
          <el-form-item label="是否联系">
            <el-select v-model="studentRelation" placeholder="请选择" style="width: 150px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateStu">确 定</el-button>
          </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { initStu } from '../../../api/tea/stu'
import { updateStu, delStu } from '../../../api/stu/stu'

export default {
  data() {
    return {
      studentRelation: '未联系',
      options: [{
        value: false,
        label: '未联系'
      }, {
        value: true,
        label: '已联系'
      }],
      dialogVisible: false,
      total: 100,
      currentPage: 1,
      students: [{
        recruitStuName: '',
        studentName: '1',
        studentPhone: '',
        studentQq: '',
        studentRelation: '',
        studentSchool: '',
        studnetMajor: '',
        studentClass: '',
        studentId: 1
      }],
      student: {
        recruitStuName: '',
        studentName: '1',
        studentPhone: '',
        studentQq: '',
        studentRelation: '',
        studentSchool: '',
        studnetMajor: '',
        studentClass: '',
        studentId: 0
      }
    }
  },
  methods: {
    // 修改学生信息
    updateStu() {
      console.log(this.student)
      this.student.studentRelation = this.studentRelation
      // 修改
      updateStu(this.student).then(response=>{
        console.log(response)
        this.$message({
          message:response.msg,
          type: 'success'
        })
        this.currentChange(this.currentPage)
        this.dialogVisible = false;
      })
    },
    // 导出学生信息
    downStus() {
      window.location.href = "http://106.14.77.197:9999/student/down"
    },
    // 获取当前页面数据
    currentChange(page) {
      this.currentPage = page
      initStu(this.currentPage).then(response=>{
        if (response.data == null) {
          this.students = []
          this.total = 10
        } else {
          this.students = response.data.records
          // for (let i = 0; i < this.students.length; i++) {
          //   this.students[i].studentRelation = this.students[i].studentRelation?'未联系':'已联系'
          // }
          this.total = response.data.total
        }
        console.log(response)
      })
    },
    // 删除学生数据
    handleDel(row) {
      this.$confirm('此操作将删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delStu(row.studentId).then(response=>{
          this.$message({
            message: response.msg,
            type: 'success'
          })
          this.currentChange(this.currentPage)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    editStu(row) {
      let old = JSON.stringify(row)
      this.student = JSON.parse(old)
      this.studentRelation = !row.studentRelation?'未联系':'已联系'
      this.dialogVisible = true
    },
    // 对话框关闭回调
    dialogVisibleClose() {
      this.student = {
        recruitStuName: '',
        studentName: '1',
        studentPhone: '',
        studentQq: '',
        studentRelation: '',
        studentSchool: '',
        studnetMajor: '',
        studentClass: '',
        studentId: 0
      }
    }
  },
  mounted() {
    this.currentChange(1)
  }
}
</script>

<style scoped>

</style>
